<template>
    <div>
      <el-row :gutter="20" class="mgb20">
        <el-col :span="6">
          <el-card>
            <div class="grid-content">
              <div class="grid-cont-center">
                <div class="grid-num">{{userCount}}</div>
                <div>用户总数</div>
              </div>
            </div>
          </el-card>
        </el-col>

      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{articleCount}}</div>
              <div>文章总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

        <el-col :span="6">
          <el-card>
            <div class="grid-content">
              <div class="grid-cont-center">
                <div class="grid-num">{{videoCount}}</div>
                <div>视频总数</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card>
            <div class="grid-content">
              <div class="grid-cont-center">
                <div class="grid-num">{{sourceCount}}</div>
                <div>资源总数</div>
              </div>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row :gutter="20" class="mgb20">
        <div class="mgb20"> <h3>用户男女比例</h3></div>
        <el-col :span="12">
          <ve-pie :data="userSex" :theme="userSexOptions"></ve-pie>
        </el-col>
        <div class="mgb20"> <h3>一年内各个月份用户增长情况</h3></div>
        <el-col :span="12">
          <ve-histogram :data="userCreateOnYear" ></ve-histogram>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mgb20">
        <div class="mgb20"> <h3>一年内各个月份文章增长情况</h3></div>
        <el-col :span="12">
          <ve-histogram :data="articleCreateOnYear" ></ve-histogram>
        </el-col>
        <div class="mgb20"> <h3>一年内各个月份用户增长情况</h3></div>
        <el-col :span="12">
          <ve-histogram :data="studyVideoCreateOnYear" ></ve-histogram>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mgb20">
        <!--<div class="mgb20"> <h3>歌手性别比例</h3> </div>
        <el-col :span="12">
          <ve-pie :data="singerSex" :theme="singerSexOptions"></ve-pie>
        </el-col>-->
        <div class="mgb20"> <h3>一年内各个月份学习资料增长情况</h3></div>
        <el-col :span="12">
          <ve-histogram :data="studySourceCreateOnYear" ></ve-histogram>
        </el-col>
        <div class="mgb20"> <h3>文章标签分布</h3></div>
        <el-col :span="12">
          <ve-histogram :data="songStyle" ></ve-histogram>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data(){
          return{
            userCount:'',
            articleCount:'',
            videoCount:'',
            sourceCount:'',
            users:[],
            singers:[],
            userSex:{           //按性别分类的用户数
              columns: ['性别','总数'],
              rows: [
                {'性别': '男','总数': 0},
                {'性别': '女','总数': 0}
              ]
            },
            singerSex:{
                columns:['性别','总数'],
              rows: [
                {'性别': '男','总数': 0},
                {'性别': '女','总数': 0},
                {'性别': '组合','总数': 0},
                {'性别': '不明','总数': 0},
              ]
            },
            songStyle:{           //按歌单风格分类
              columns: ['风格','总数'],
              rows: [
              ]
            },
            userCreateOnYear:{           //按歌单风格分类
              columns: ['月份','总数'],
              rows: [
                {'月份': 1,'总数': 0},
                {'月份': 2,'总数': 0},
                {'月份': 3,'总数': 0},
                {'月份': 4,'总数': 0},
                {'月份': 5,'总数': 0},
                {'月份': 6,'总数': 0},
                {'月份': 7,'总数': 0},
                {'月份': 8,'总数': 0},
                {'月份': 9,'总数': 0},
                {'月份': 10,'总数': 0},
                {'月份': 11,'总数': 0},
                {'月份': 12,'总数': 0},
              ]
            },
            articleCreateOnYear:{           //按歌单风格分类
              columns: ['月份','总数'],
              rows: [
                {'月份': 1,'总数': 0},
                {'月份': 2,'总数': 0},
                {'月份': 3,'总数': 0},
                {'月份': 4,'总数': 0},
                {'月份': 5,'总数': 0},
                {'月份': 6,'总数': 0},
                {'月份': 7,'总数': 0},
                {'月份': 8,'总数': 0},
                {'月份': 9,'总数': 0},
                {'月份': 10,'总数': 0},
                {'月份': 11,'总数': 0},
                {'月份': 12,'总数': 0},
              ]
            },
            studyVideoCreateOnYear:{           //按歌单风格分类
              columns: ['月份','总数'],
              rows: [
                {'月份': 1,'总数': 0},
                {'月份': 2,'总数': 0},
                {'月份': 3,'总数': 0},
                {'月份': 4,'总数': 0},
                {'月份': 5,'总数': 0},
                {'月份': 6,'总数': 0},
                {'月份': 7,'总数': 0},
                {'月份': 8,'总数': 0},
                {'月份': 9,'总数': 0},
                {'月份': 10,'总数': 0},
                {'月份': 11,'总数': 0},
                {'月份': 12,'总数': 0},
              ]
            },
            studySourceCreateOnYear:{           //按歌单风格分类
              columns: ['月份','总数'],
              rows: [
                {'月份': 1,'总数': 0},
                {'月份': 2,'总数': 0},
                {'月份': 3,'总数': 0},
                {'月份': 4,'总数': 0},
                {'月份': 5,'总数': 0},
                {'月份': 6,'总数': 0},
                {'月份': 7,'总数': 0},
                {'月份': 8,'总数': 0},
                {'月份': 9,'总数': 0},
                {'月份': 10,'总数': 0},
                {'月份': 11,'总数': 0},
                {'月份': 12,'总数': 0},
              ]
            },
            userSexOptions:{
                color:['#87cefa','#ffc0cb']
            },
            singerSexOptions:{
              color:['#87cefa','#ffc0cb','#00FF7F','#FF0000']
            }
          }
        },
      created() {
          this.setUserCreateTimeOnYear();
          this.setArticleCreateTimeOnYear();
          this.setStudyVideoCreateTimeOnYear();
          this.setStudySourceCreateTimeOnYear()
          this.setStyle();
      },
      mounted() {
        this.selectAllUserCount();
        this.selectAllArticleCount();
        this.selectAllVideoCount();
        this.selectAllSourceCount();
      },
      methods:{
          selectAllUserCount(){
            var _this=this;
            this.$axios.get("http://localhost:8888/user/selectAllUser").then(function (data) {
                  _this.users=data.data;
                  console.log(data);
                  _this.userCount=data.data.length;
                  _this.userSex.rows[0]['总数']=_this.setSex(1,_this.users);
                  _this.userSex.rows[1]['总数']=_this.setSex(0,_this.users);
            })
          },
          setSex(sex,val){
            let count=0;
            for(let item of val){
              if(sex==item.sex)
              {
                count++;
              }
            }
            return count;
          },
          selectAllArticleCount(){
            var _this=this;
            this.$axios.get("http://localhost:8888/article/selectAll").then(function (data) {
              _this.articleCount=data.data.length;
            })
          },

        selectAllVideoCount(){
          var _this=this;
          this.$axios.get("http://localhost:8888/StudyVideo/selectAllStudyVideos").then(function (data) {
           // _this.singers=data.data;
            _this.videoCount=data.data.length;
          /*  _this.singerSex.rows[0]['总数']=_this.getSingerSex(1,_this.singers);
            _this.singerSex.rows[1]['总数']=_this.getSingerSex(0,_this.singers);
            _this.singerSex.rows[2]['总数']=_this.getSingerSex(2,_this.singers);
            _this.singerSex.rows[3]['总数']=_this.getSingerSex(3,_this.singers);*/
          })
        },

        getSingerSex(sex,val){
          let count=0;
          for(let item of val){
            if(sex==item.sex)
            {
              count++;
            }
          }
          return count;
        },
        selectAllSourceCount(){
          var _this=this;
          this.$axios.get("http://localhost:8888/StudySource/selectAllStudySources").then(function (data) {
            _this.sourceCount=data.data.length;
            console.log(data.data);
           /* for(let item of data.data){
              _this.setStyle(item.style);
            }*/
          })
        },
        setStyle(){
            let _this=this;
            this.$axios.get("http://localhost:8888/tag/selectAllTagsCounts").then(function (data) {
                console.log(data);
              for(let tag of data.data){
                let item={'风格':tag.name,'总数':tag.count};
                _this.songStyle.rows.push(item)
              }
            })
        },
        setUserCreateTimeOnYear(){
            var _this=this;
            this.$axios.get("http://localhost:8888/user/selectUserCreateOnYear").then(function (data) {
              console.log(data);
              console.log(data.data);
              let result=data.data;
              for(var key in result){
                console.log(key);
                console.log(result[key]);
              }

              for(var resultItem in result){
                for(let item of _this.userCreateOnYear.rows){
                  if(item['月份']==resultItem){
                    item['总数']=result[resultItem];
                  }
                }
              }
            })
        },
        setArticleCreateTimeOnYear(){
          var _this=this;
          this.$axios.get("http://localhost:8888/article/selectArticleCreateOnYear").then(function (data) {
            console.log(data);
            console.log(data.data);
            let result=data.data;
            for(var key in result){
              console.log(key);
              console.log(result[key]);
            }

            for(var resultItem in result){
              for(let item of _this.articleCreateOnYear.rows){
                if(item['月份']==resultItem){
                  item['总数']=result[resultItem];
                }
              }
            }
          })
        },
        setStudyVideoCreateTimeOnYear(){
          var _this=this;
          this.$axios.get("http://localhost:8888/StudyVideo/selectStudyVideoCreateOnYear").then(function (data) {
            console.log(data);
            console.log(data.data);
            let result=data.data;
            for(var key in result){
              console.log(key);
              console.log(result[key]);
            }

            for(var resultItem in result){
              for(let item of _this.studyVideoCreateOnYear.rows){
                if(item['月份']==resultItem){
                  item['总数']=result[resultItem];
                }
              }
            }
          })
        },
        setStudySourceCreateTimeOnYear(){
          var _this=this;
          this.$axios.get("http://localhost:8888/StudySource/selectStudySourceCreateOnYear").then(function (data) {
            console.log(data);
            console.log(data.data);
            let result=data.data;
            for(var key in result){
              console.log(key);
              console.log(result[key]);
            }

            for(var resultItem in result){
              for(let item of _this.studySourceCreateOnYear.rows){
                if(item['月份']==resultItem){
                  item['总数']=result[resultItem];
                }
              }
            }
          })
        },
      }
    }
</script>

<style scoped>
.grid-content{
  display: flex;
  align-items: center;
  height: 50px;
}

.grid-cont-center{
    flex:1;
    text-align: center;
    font-size: 14px;
    color:darkgray;
  }

.grid-num{
  font-size: 30px;
  font-weight: bold;
}
</style>
